<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Resource/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/Resource/js/jquery-3.3.1.js"></script>
    <link href="${pageContext.request.contextPath}/image/logo.png" rel="Shortcut Icon">
    <script src="Resource/layui/layui.js" charset="utf-8"></script>
    <script type="javascript">
        $('.layui-none', $(this.elem).next()).width($('.layui-table-header table', $(this.elem).next()).width() + 'px');
    </script>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <!-- 表单元素 -->
    <table class="layui-form" style="margin-top: 40px;">
        <tr>
            <td>
                <div class="layui-form-item" style="width: 260px;">
                    <label style="width: 130px;" class="layui-form-label">管理员编号</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="aId" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input glybh">
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item" style="width: 260px;margin-left: -40px;">
                    <label style="width: 130px;" class="layui-form-label">管理员名字</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="aName" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input glyxm">
                    </div>
                </div>
            </td>
            <td>
                <div class="layui-form-item" style="width: 260px;margin-left: -10px;">
                    <label style="width: 130px;" class="layui-form-label">操作类型</label>
                    <div class="layui-input-block">
                        <input type="text" style="width: 130px;" name="type" required lay-verify="required" id="test1" placeholder="请输入.." autocomplete="off" class="layui-input czlx">
                    </div>
                </div>
            </td>
            <td>
                <button type="button" id="searchTable" class="layui-btn layui-btn-primary" style="margin:0 0 16px 19px;border-radius:7px;">
                    <i class="layui-icon">&#xe615;</i></button>
            </td>
        </tr>
    </table>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"  style="background:#BB7B57"><i class="layui-icon">&#xe640;删除</i></a>
</script>
<script>
    layui.use(['table','laydate','element'], function(){
        var table = layui.table;
        var element = layui.element;
        var laydate = layui.laydate;
        table.render({
            elem: '#test'
            ,url:'./queryAllDiary'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }],
            limits: [3, 5, 10, 20],
                limit: 11,
            method: "POST",
            id:'testReload',
            height:625,
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            done:function () {
                layui.use(['laydate'], function(){
                    var laydate = layui.laydate;
                    laydate.render({
                        elem: '#test1',
                        trigger: 'click',
                        isInitValue: false,
                        theme: '#2c78da'
                        ,type:'datetime'
                    });
                });
            }
            ,title: '用户数据表'
            ,cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                },
                    {
                        field: 'id',
                        title: '日志编号',
                        align: 'center',
                        width: 100
                    },
                    {
                        field: 'aId',
                        title: '管理员编号',
                        align: 'center',
                        width: 100
                    },
                    {
                        field: 'aName',
                        title: '管理员用户名',
                        align: 'center',
                        width: 120
                    },
                    {
                        field: 'loginIp',
                        title: '登录的IP地址',
                        align: 'center',
                    },
                    {
                        field: 'operation',
                        title: '操作内容',
                        align: 'center',
                    },
                    {
                        field: 'type',
                        title: '操作类型',
                        align: 'center',
                        width: 100
                    },
                    {
                        field: 'url',
                        title: '路径',
                        align: 'center',
                    },
                    {
                        field: 'createTime',
                        title: '操作时间',
                        align: 'center',
                        width: 170,
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo',
                    },
                ]]
            ,page: true,
            parseData: function(res) { //res 即为原始返回的数据
                console.log(res);
                var current_pages;
                //第一次显示的时候this.page=true，把这种情况单独列出
                if (this.page === true) current_pages = 1;
                else current_pages = this.page.curr;
                //根据分页要求选出需要显示的数据
                var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.length,
                    "data": data
                }
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var jsonData = JSON.stringify(data);
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    location.href = "./deleteDiary?id=" + data.id; //跳转到Servlet
                });
            }
        });
        $('body').on('click', '#searchTable', function() {
            var input1 = $(".glybh").val();
            var input2 = $(".glyxm").val();
            var input3 = $(".czlx").val();
            table.reload('testReload', {
                url: './selectDiary',
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                where: {
                    aId: input1,
                    aName: input2,
                    type: input3,
                },
                page: {
                    curr: 1
                }
            });
        });
    });
</script>
</body>
</html>
